<template>
    <div style="">
        <div style="width: 100%;margin: 0 auto">
            <el-row style="margin-top: 18px" type="flex" justify="space-around" :gutter="8">

                <el-col class="rows1" :span="8"
                        style="margin-right: 16px;background-color: #17A2B8;border-radius: 10px;position: relative">
                    <div class="grid-content bg-purple">
                        <div class="item"
                             style="margin-top: 10px">
                            <div style="display: flex;justify-content: space-between">
                                <div class="left">
                                    <div style="font-size: 2.2rem;color: #fff;font-weight: 800;margin-left: 5px">新增故事
                                    </div>
                                    <div style="font-size: 1rem;color: #ffffff;margin-top: 15px;margin-left: 5px">
                                        记心中所想
                                    </div>
                                </div>
                                <div class="right" style=""><i class="el-icon-edit icon01"
                                                               style="font-size: 4rem;line-height: 162px"></i></div>
                            </div>
                            <div @click="toWrite" class="bottom"
                                 style="font-size: 1.1rem;background-color: rgba(0,0,0,0.1);margin-bottom: 2px;color: #ffffff;text-align: center">
                                lets go
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col class="rows2" :span="8"
                        style="margin-right: 16px;background-color: #28A745;border-radius: 10px;position: relative">
                    <div class="grid-content bg-purple">
                        <div class="item"
                             style="margin-top: 10px">
                            <div style="display: flex;justify-content: space-between">
                                <div class="left">
                                    <div style="font-size: 2.2rem;color: #fff;font-weight: 800;margin-left: 5px">{{data1.storyTotal}}
                                    </div>
                                    <div style="font-size: 1rem;color: #ffffff;margin-top: 15px;margin-left: 5px">
                                        总文章数
                                    </div>
                                </div>
                                <div class="right" style=""><i class="el-icon-date icon02"
                                                               style="font-size: 4rem;line-height: 162px"></i></div>
                            </div>
                            <div @click="toAdminBlog" class="bottom"
                                 style="font-size: 1.1rem;background-color: rgba(0,0,0,0.1);margin-bottom: 2px;color: #ffffff;text-align: center">
                                More Info

                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col class="rows3" :span="8"
                        style="background-color: #FFC107;border-radius: 10px;position: relative">
                    <div class="grid-content bg-purple">
                        <div class="item"
                             style="margin-top: 10px">
                            <div style="display: flex;justify-content: space-between">
                                <div class="left">
                                    <div style="font-size: 2.2rem;color: #fff;font-weight: 800;margin-left: 5px">{{data1.categoryTotal}}
                                    </div>
                                    <div style="font-size: 1rem;color: #ffffff;margin-top: 15px;margin-left: 5px">
                                        分类数量
                                    </div>
                                </div>
                                <div class="right" style=""><i class="el-icon-collection-tag icon03"
                                                               style="font-size: 4rem;line-height: 162px"></i></div>
                            </div>
                            <div @click="toType" class="bottom"
                                 style="font-size: 1.1rem;background-color: rgba(0,0,0,0.1);margin-bottom: 2px;color: #ffffff;text-align: center">
                                More Info

                            </div>
                        </div>
                    </div>
                </el-col>


            </el-row>
            <el-row class="rows" style="margin-top: 18px" type="flex" justify="space-around" :gutter="8">

                <el-col class="rows4" :span="8"
                        style="margin-right: 16px;background-color: #DC3545;border-radius: 10px;position: relative">
                    <div class="grid-content bg-purple">
                        <div class="item"
                             style="margin-top: 10px">
                            <div style="display: flex;justify-content: space-between">
                                <div class="left">
                                    <div style="font-size: 2.2rem;color: #fff;font-weight: 800;margin-left: 5px">{{data1.productTotal}}
                                    </div>
                                    <div style="font-size: 1rem;color: #ffffff;margin-top: 15px;margin-left: 5px">
                                        商品数量
                                    </div>
                                </div>
                                <div class="right" style=""><i class="el-icon-price-tag icon04"
                                                               style="font-size: 4rem;line-height: 162px"></i></div>
                            </div>
                            <div @click="toAdminTag" class="bottom"
                                 style="font-size: 1.1rem;background-color: rgba(0,0,0,0.1);margin-bottom: 2px;color: #ffffff;text-align: center">
                                More Info

                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col class="rows5" :span="8"
                        style="margin-right: 16px;background-color:#007BFF;border-radius: 10px;position: relative">
                    <div class="grid-content bg-purple">
                        <div class="item"
                             style="margin-top: 10px">
                            <div style="display: flex;justify-content: space-between">
                                <div class="left">
                                    <div style="font-size: 2.2rem;color: #fff;font-weight: 800;margin-left: 5px">{{data1.userTotal}}
                                    </div>
                                    <div style="font-size: 1rem;color: #ffffff;margin-top: 15px;margin-left: 5px">
                                        用户数
                                    </div>
                                </div>
                                <div class="right" style=""><i class="el-icon-chat-round icon05"
                                                               style="font-size: 4rem;line-height: 162px"></i></div>
                            </div>
                            <div @click="toComment" class="bottom"
                                 style="font-size: 1.1rem;background-color: rgba(0,0,0,0.1);margin-bottom: 2px;color: #ffffff;text-align: center">
                                More Info

                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col class="rows6" :span="8"
                        style="background-color: #343A40;border-radius: 10px;position: relative">
                    <div class="grid-content bg-purple">
                        <div class="item"
                             style="margin-top: 10px">
                            <div style="display: flex;justify-content: space-between">
                                <div class="left">
                                    <div style="font-size: 2.2rem;color: #fff;font-weight: 800;margin-left: 5px">系统配置
                                    </div>
                                    <div style="font-size: 1rem;color: #ffffff;margin-top: 15px;margin-left: 5px">
                                        站点描述信息
                                    </div>
                                </div>
                                <div class="right" style=""><i class="el-icon-edit icon06"
                                                               style="font-size: 4rem;line-height: 162px"></i></div>
                            </div>
                            <div @click="toCustom" class="bottom"
                                 style="font-size: 1.1rem;background-color: rgba(0,0,0,0.1);margin-bottom: 2px;color: #ffffff;text-align: center">
                                More Info
                            </div>
                        </div>
                    </div>
                </el-col>


            </el-row>
        </div>
    </div>
</template>

<script>
    // import echarts from 'echarts'

    export default {
        name: "AdminIndex",
        data(){
            return{
                data1:{}

            }
        },
        created() {
            this.getInfo();
        },
        methods: {
            async getInfo() {
                const {data: res} = await this.$http.get('/admin/index')
                console.log(res);
                console.log(res.data.blogCount)
                this.data1=res.data;
            }
            ,
            toCustom() {
                this.$router.push('/admincustom')
            },
            toWrite() {
                console.log(11)
                this.$router.push('/write')

            },
            toAdminBlog() {
                this.$router.push('/adminstory')

            },
            toType() {
                this.$router.push('/category')

            },
            toAdminTag() {
                this.$router.push('/product')

            },
            toComment() {
                this.$router.push('/user')

            }
        }
    }
</script>

<style lang="less" scoped>
    .rows1 {
        /*display: flex !important;*/
        /*flex-wrap: wrap;*/

        .icon01 {
            transition: all 0.5s;
        }

    }

    .rows2 {
        /*display: flex !important;*/
        /*flex-wrap: wrap;*/

        .icon02 {
            transition: all 0.5s;
        }

    }

    .rows3 {
        /*display: flex !important;*/
        /*flex-wrap: wrap;*/

        .icon03 {
            transition: all 0.5s;
        }

    }

    .rows4 {
        /*display: flex !important;*/
        /*flex-wrap: wrap;*/

        .icon04 {
            transition: all 0.5s;
        }

    }

    .rows5 {
        /*display: flex !important;*/
        /*flex-wrap: wrap;*/

        .icon05 {
            transition: all 0.5s;
        }

    }

    .rows6 {
        /*display: flex !important;*/
        /*flex-wrap: wrap;*/

        .icon06 {
            transition: all 0.5s;
        }

    }

    .rows1:hover .icon01 {
        transform: scale(1.2);

    }

    .rows2:hover .icon02 {
        transform: scale(1.2);

    }

    .rows3:hover .icon03 {
        transform: scale(1.2);

    }

    .rows4:hover .icon04 {
        transform: scale(1.2);

    }

    .rows5:hover .icon05 {
        transform: scale(1.2);

    }

    .rows6:hover .icon06 {
        transform: scale(1.2);

    }

    .bottom {
        cursor: pointer;
    }
</style>